<template>
  <view class="container screen-width">
    <scroll-view class="list" :scroll-y="true" @scrolltolower="scrolltolower()">
      <!-- <view
        v-for="(item, index) in list"
        :key="item.id"
      class="company-content flex items-middle space-between">-->
      <view
        v-for="(item, index) in list"
        :key="index"
        class="item flex items-middle space-between"
        @click="toDetail(item.id)"
      >
        <view class="img-box flex-center flex items-middle">
          <image mode="widthFix" :src="getImageUrl(item.productImage)" />
          <!-- <view v-else class="text">暂无图片</view> -->
        </view>
        <view class="info">
          <view class="title">{{ item.productName }}</view>
          <view class="title">支付金额：{{ item.orderMoney }}</view>
          <view class="date">
            <text>订单状态：</text>
            {{ item.orderStatus===1?'待发货':'已发货' }}
          </view>
        </view>
      </view>
      <!-- </view> -->
      <van-divider v-if="list.length && total < list.length + 1" content-position="center">我也是有底线的</van-divider>
      <van-divider v-if="!list.length" content-position="center">暂无数据</van-divider>
    </scroll-view>
    <Festival></Festival>
  </view>
</template>

<script>
import { orderList } from "@/util/api/product.js";
import { imgUrl } from "@/util/api.js";
import { getImage } from "@/util/getImage.js";
export default {
  data() {
    return {
      total: 0,
      list: [],
      params: {
        pageNo: 1,
        pageSize: 10
      },
      imgUrl: imgUrl
    };
  },
  onLoad() {
    this.getList(1);
  },
  methods: {
    getImageUrl(url) {
      return getImage(url);
    },
    getList(type) {
      if (type === 1) {
        this.params.pageNo = 1;
      }
      orderList(this.params).then(res => {
        if (this.params.pageNo === 1) {
          this.list = res.result.records;
        } else {
          this.list.push(...res.result.records);
        }
        this.total = res.result.total;
      });
    },
    scrolltolower() {
      if (this.list.length >= this.total) {
        return;
      }
      this.params.pageNo = this.params.pageNo + 1;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  .list {
    height: 100vh;
    width: 100%;
    padding: 30upx;
    box-sizing: border-box;
    .item {
      background: #fff;
      margin-bottom: 20upx;
      border-radius: 10upx;
      padding: 20upx 0;
      box-sizing: border-box;
      .img-box {
        width: 200upx;
        min-height: 250upx;
        background: rgba(0, 0, 0, 0.05);
        margin: 0 20upx 0 20upx;

        .text {
          color: #aaaaaa;
        }

        image {
          width: 200upx;
        }
      }

      .info {
        width: 75%;
      }

      .title {
        font-size: 28upx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-bottom: 20upx;
      }

      .date {
        text {
          font-size: 24upx;
          color: #aaaaaa;
        }
        font-size: 32upx;
        line-height: 40upx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #ff5000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; //限制行数
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
